{% extends "base.html" %}
{% load static %}

{% block title %}湘行 - 湘西酒店民宿预订{% endblock %}

{% block extra_css %}
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 配置Tailwind自定义颜色和字体 - 调整为木质棕和苗族红风格 -->
<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    wood: '#8B4513', // 木质棕
                    'miao-red': '#C22C24', // 苗族服饰红
                    'miao-gold': '#D4AF37', // 苗族金饰色（辅助色）
                    neutral: {
                        100: '#F9F5F0', // 浅木色背景
                        200: '#E8E0D5',
                        300: '#D2C4B0',
                        400: '#A68F73',
                        500: '#7A644A',
                        600: '#5C4A33',
                        700: '#3D3220',
                    }
                },
                fontFamily: {
                    sans: ['Noto Sans SC', 'system-ui', 'sans-serif'],
                    serif: ['Noto Serif SC', 'serif'],
                },
                maxWidth: {
                    'content': '1000px', // 添加内容区域最大宽度
                }
            }
        }
    }
</script>

<style type="text/tailwindcss">
    @layer utilities {
        .content-auto {
            content-visibility: auto;
        }
        .text-shadow {
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        .card-hover {
            @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
        }
        .scroll-decoration {
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.720-.264.888-.14 1.24.916 1.9 2.342 3.028 2.982.9.5 1.972-.222 2.656-1.162.684-.94 1.012-2.067 1.804-2.946.792-.88 1.952-1.394 3.040-1.394 1.088 0 2.248.514 3.040 1.394.792.88 1.12 1.996 1.804 2.946.684.94 1.756 1.662 2.656 1.162 1.128-.64 1.787-2.066 3.028-2.982.168-.125.53-.001.888.14 1.39.509 2.89.84 4.416.84 1.527 0 3.027-.331 4.416-.84.358-.13.720-.264.888.14 1.24.916 1.9 2.342 3.028 2.982.9.5 1.972-.222 2.656-1.162.684-.94 1.012-2.067 1.804-2.946.792-.88 1.952-1.394 3.040-1.394 1.088 0 2.248.514 3.040 1.394.792.88 1.12 1.996 1.804 2.946.684.94 1.756 1.662 2.656 1.162 1.128-.64 1.787-2.066 3.028-2.982.168-.125.53-.001.888.14V0H0v20c.358-.13.720-.264.888.14 1.24.916 1.9 2.342 3.028 2.982.9.5 1.972-.222 2.656-1.162.684-.94 1.012-2.067 1.804-2.946.792-.88 1.952-1.394 3.040-1.394 1.088 0 2.248.514 3.040 1.394.792.88 1.12 1.996 1.804 2.946.684.94 1.756 1.662 2.656 1.162 1.128-.64 1.787-2.066 3.028-2.982.168-.125.53-.001.888.14 1.39.509 2.89.84 4.416.84 1.527 0 3.027-.331 4.416-.84z' fill='%238B4513' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
        }
        .pattern-bg {
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238B4513' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        /* 湘西风格装饰分隔线 */
        .divider-xiangxi {
            height: 1px;
            background: linear-gradient(90deg, transparent, #8B4513, transparent);
            position: relative;
        }
        .divider-xiangxi::after {
            content: "❦";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: #F9F5F0;
            padding: 0 10px;
            color: #C22C24;
        }
        /* 紧凑的人数选择器样式 */
        .counter-container {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .counter-btn {
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            border: 1px solid #E5E6EB;
            background-color: white;
            color: #4E5969;
            cursor: pointer;
            transition: all 0.2s;
        }
        .counter-btn:hover {
            background-color: #F5F7FA;
        }
        .counter-value {
            min-width: 1.5rem;
            text-align: center;
        }
        /* 民族风格卡片阴影 */
        .ethnic-shadow {
            box-shadow: 0 4px 6px -1px rgba(139, 69, 19, 0.1), 0 2px 4px -1px rgba(139, 69, 19, 0.06);
        }
        /* 苗族银饰风格边框 */
        .miao-border {
            border-image: linear-gradient(45deg, #D4AF37, #FFFFFF, #D4AF37) 1;
        }
    }
</style>
{% endblock %}

{% block content %}
<body class="bg-neutral-100 font-sans text-neutral-700 pattern-bg">
    <!-- 页面标题 - 修改为平行放置湘行和图标 -->
    <div class="mb-8 text-center">
        <div class="flex items-center justify-center gap-3">
            <i class="fa fa-home text-wood text-3xl"></i>
            <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-normal text-neutral-700 relative inline-block">
                湘行
                <span class="absolute -bottom-2 left-0 w-full h-1 bg-wood/30"></span>
            </h1>
        </div>
        <p class="text-neutral-500 mt-4 max-w-2xl mx-auto">
            体验吊脚楼的独特韵味，感受湘西人家的淳朴热情，让每一次住宿都成为旅行中的美好记忆
        </p>
    </div>

    <!-- 民族风格装饰分隔线 -->
    <div class="divider-xiangxi my-6"></div>

    <!-- 主要内容容器 - 添加宽度限制和居中 -->
    <div class="max-w-content mx-auto px-4">
        <!-- 搜索区域 - 添加湘西元素背景 -->
        <section class="mb-8 rounded-xl overflow-hidden shadow-md relative">
            <!-- 背景装饰图案 -->
            <div class="absolute inset-0 opacity-5">
                <img src="https://picsum.photos/id/131/1200/400" alt="湘西风景背景" class="w-full h-full object-cover">
            </div>
            <div class="bg-white/95 p-6 md:p-8 relative z-10 border border-wood/20">
                <div class="flex flex-col gap-4">
                    <!-- 第一行：入住日期和退房日期 -->
                    <div class="flex flex-col sm:flex-row gap-4">
                        <!-- 入住日期 -->
                        <div class="flex-1 relative">
                            <label class="block text-sm font-medium text-neutral-500 mb-1">入住日期</label>
                            <div class="relative">
                                <i class="fa fa-calendar absolute left-3 top-1/2 -translate-y-1/2 text-wood/60"></i>
                                <input type="date" value="2025-08-15" class="w-full pl-10 pr-4 py-3 border border-neutral-200 rounded-lg focus:ring-2 focus:ring-wood/30 focus:border-wood outline-none transition-all">
                            </div>
                        </div>

                        <!-- 退房日期 -->
                        <div class="flex-1 relative">
                            <label class="block text-sm font-medium text-neutral-500 mb-1">退房日期</label>
                            <div class="relative">
                                <i class="fa fa-calendar absolute left-3 top-1/2 -translate-y-1/2 text-wood/60"></i>
                                <input type="date" value="2025-08-20" class="w-full pl-10 pr-4 py-3 border border-neutral-200 rounded-lg focus:ring-2 focus:ring-wood/30 focus:border-wood outline-none transition-all">
                            </div>
                        </div>
                    </div>

                    <!-- 第二行：目的地和人数 -->
                    <div class="flex flex-col sm:flex-row gap-4">
                        <!-- 目的地（支持数据库动态加载） -->
                        <div class="flex-1 relative">
                            <label class="block text-sm font-medium text-neutral-500 mb-1">目的地</label>
                            <div class="relative">
                                <i class="fa fa-map-marker absolute left-3 top-1/2 -translate-y-1/2 text-wood/60"></i>
                                <input type="text" placeholder="您将前往何处？" list="destinations"
                                    class="w-full pl-10 pr-4 py-3 border border-neutral-200 rounded-lg focus:ring-2 focus:ring-wood/30 focus:border-wood outline-none transition-all">
                                <!-- 数据列表，实际项目中会从数据库加载 -->
                                <datalist id="destinations">
                                    <option value="凤凰古城">
                                    <option value="张家界">
                                    <option value="芙蓉镇">
                                    <option value="吉首市">
                                    <option value="德夯苗寨">
                                    <option value="里耶古城">
                                    <option value="猛洞河">
                                </datalist>
                            </div>
                        </div>

                        <!-- 人数选择器 - 紧凑的-0+形式 -->
                        <div class="flex-1 relative">
                            <label class="block text-sm font-medium text-neutral-500 mb-1">人数</label>
                            <div class="relative">
                                <i class="fa fa-user absolute left-3 top-1/2 -translate-y-1/2 text-wood/60"></i>
                                <div class="w-full pl-10 pr-4 py-3 border border-neutral-200 rounded-lg flex items-center justify-between">
                                    <!-- 成人计数器 -->
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm text-neutral-500">成人</span>
                                        <div class="counter-container">
                                            <button type="button" class="counter-btn" id="adult-minus">
                                                <i class="fa fa-minus text-xs"></i>
                                            </button>
                                            <span class="counter-value text-neutral-700" id="adult-count">0</span>
                                            <button type="button" class="counter-btn" id="adult-plus">
                                                <i class="fa fa-plus text-xs"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <!-- 儿童计数器 -->
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm text-neutral-500">儿童</span>
                                        <div class="counter-container">
                                            <button type="button" class="counter-btn" id="child-minus">
                                                <i class="fa fa-minus text-xs"></i>
                                            </button>
                                            <span class="counter-value text-neutral-700" id="child-count">0</span>
                                            <button type="button" class="counter-btn" id="child-plus">
                                                <i class="fa fa-plus text-xs"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <!-- 房间计数器 -->
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm text-neutral-500">房间</span>
                                        <div class="counter-container">
                                            <button type="button" class="counter-btn" id="room-minus">
                                                <i class="fa fa-minus text-xs"></i>
                                            </button>
                                            <span class="counter-value text-neutral-700" id="room-count">0</span>
                                            <button type="button" class="counter-btn" id="room-plus">
                                                <i class="fa fa-plus text-xs"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 搜索按钮 -->
                    <div class="mt-2">
                        <button class="w-full md:w-auto bg-wood hover:bg-wood/90 text-white font-medium py-3 px-8 rounded-lg transition-all transform hover:scale-[1.02] active:scale-[0.98] flex items-center justify-center">
                            <i class="fa fa-search mr-2"></i> 搜索住宿
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 选项卡容器（添加民族风格装饰） -->
        <section class="mb-8 rounded-xl overflow-hidden bg-white shadow-sm border border-wood/10">
            <div class="p-4 md:p-6">
                <div class="flex flex-wrap border-b border-neutral-200">
                    <button class="accommodation-tab py-3 px-6 font-medium text-wood border-b-2 border-wood text-sm md:text-base" data-target="hotel">
                        <i class="fa fa-building-o mr-1"></i> 酒店推荐
                    </button>
                    <button class="accommodation-tab py-3 px-6 font-medium text-neutral-500 hover:text-wood border-b-2 border-transparent hover:border-wood/30 text-sm md:text-base" data-target="homestay">
                        <i class="fa fa-home mr-1"></i> 民宿推荐
                    </button>
                    <button class="accommodation-tab py-3 px-6 font-medium text-neutral-500 hover:text-wood border-b-2 border-transparent hover:border-wood/30 text-sm md:text-base" data-target="special">
                        <i class="fa fa-tag mr-1"></i> 特价住宿
                    </button>
                </div>
            </div>
        </section>

        <!-- 酒店推荐区域 -->
        <section id="hotel" class="accommodation-content mb-12">
            <h2 class="text-xl font-bold text-neutral-700 mb-6 flex items-center">
                <i class="fa fa-building-o text-wood mr-2"></i> 酒店推荐
                <span class="ml-2 text-sm font-normal text-neutral-500">体验湘西风情的舒适住宿</span>
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 酒店卡片1 - 凤凰古城特色 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover ethnic-shadow border border-wood/10">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1031/600/400" alt="凤凰古城江景酒店外观，具有吊脚楼风格" class="w-full h-48 object-cover">
                        <span class="absolute top-3 left-3 bg-miao-red text-white text-xs font-medium px-2 py-1 rounded">
                            特色推荐
                        </span>
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-lg mb-1">凤凰古城江景酒店</h3>
                        <div class="flex items-center text-sm text-neutral-500 mb-3">
                            <i class="fa fa-map-marker mr-1"></i>
                            <span>凤凰县沱江镇，近虹桥景区</span>
                        </div>
                        <div class="flex items-center mb-3">
                            <div class="flex text-miao-gold mr-2">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                            </div>
                            <span class="text-sm text-neutral-500">(128条评价)</span>
                        </div>
                        <p class="text-neutral-600 text-sm mb-4 line-clamp-2">
                            融合苗族吊脚楼建筑风格，俯瞰沱江美景，提供苗家特色早餐，步行可达多个景点。
                        </p>
                        <div class="flex items-end justify-between">
                            <div>
                                <span class="text-lg font-bold text-neutral-700">¥428</span>
                                <span class="text-sm text-neutral-500">/晚</span>
                            </div>
                            <button class="bg-wood/10 text-wood px-3 py-1.5 rounded-lg text-sm font-medium hover:bg-wood/20 transition-colors">
                                查看详情
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 酒店卡片2 - 张家界特色 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover ethnic-shadow border border-wood/10">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1039/600/400" alt="张家界森林公园度假酒店外观，融入自然环境" class="w-full h-48 object-cover">
                        <span class="absolute top-3 left-3 bg-wood text-white text-xs font-medium px-2 py-1 rounded">
                            性价比高
                        </span>
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-lg mb-1">张家界森林公园度假酒店</h3>
                        <div class="flex items-center text-sm text-neutral-500 mb-3">
                            <i class="fa fa-map-marker mr-1"></i>
                            <span>武陵源区，近张家界国家森林公园</span>
                        </div>
                        <div class="flex items-center mb-3">
                            <div class="flex text-miao-gold mr-2">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-o"></i>
                            </div>
                            <span class="text-sm text-neutral-500">(96条评价)</span>
                        </div>
                        <p class="text-neutral-600 text-sm mb-4 line-clamp-2">
                            建筑风格融入湘西土家族元素，毗邻森林公园入口，提供景区接送和土家族歌舞表演。
                        </p>
                        <div class="flex items-end justify-between">
                            <div>
                                <span class="text-lg font-bold text-neutral-700">¥568</span>
                                <span class="text-sm text-neutral-500">/晚</span>
                            </div>
                            <button class="bg-wood/10 text-wood px-3 py-1.5 rounded-lg text-sm font-medium hover:bg-wood/20 transition-colors">
                                查看详情
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 酒店卡片3 - 湘西民族特色 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover ethnic-shadow border border-wood/10">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1053/600/400" alt="湘西民族大酒店外观，具有民族建筑风格" class="w-full h-48 object-cover">
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-lg mb-1">湘西民族大酒店</h3>
                        <div class="flex items-center text-sm text-neutral-500 mb-3">
                            <i class="fa fa-map-marker mr-1"></i>
                            <span>吉首市人民中路，市中心位置</span>
                        </div>
                        <div class="flex items-center mb-3">
                            <div class="flex text-miao-gold mr-2">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                            </div>
                            <span class="text-sm text-neutral-500">(215条评价)</span>
                        </div>
                        <p class="text-neutral-600 text-sm mb-4 line-clamp-2">
                            融合湘西苗族、土家族建筑艺术，大堂装饰有民族织锦和银饰，提供正宗湘西美食。
                        </p>
                        <div class="flex items-end justify-between">
                            <div>
                                <span class="text-lg font-bold text-neutral-700">¥688</span>
                                <span class="text-sm text-neutral-500">/晚</span>
                            </div>
                            <button class="bg-wood/10 text-wood px-3 py-1.5 rounded-lg text-sm font-medium hover:bg-wood/20 transition-colors">
                                查看详情
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 查看更多按钮 -->
            <div class="mt-8 text-center">
                <button class="border border-wood text-wood hover:bg-wood hover:text-white transition-colors px-6 py-2 rounded-lg font-medium">
                    查看更多酒店 <i class="fa fa-angle-right ml-1"></i>
                </button>
            </div>
        </section>

        <!-- 民宿推荐区域 -->
        <section id="homestay" class="accommodation-content hidden mb-12">
            <h2 class="text-xl font-bold text-neutral-700 mb-6 flex items-center">
                <i class="fa fa-home text-wood mr-2"></i> 民宿推荐
                <span class="ml-2 text-sm font-normal text-neutral-500">感受湘西人家的淳朴热情</span>
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 民宿卡片1 - 吊脚楼特色 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover ethnic-shadow border border-wood/10">
                    <div class="relative">
                        <img src="https://picsum.photos/id/164/600/400" alt="沱江边吊脚楼民宿外观，传统苗族建筑" class="w-full h-48 object-cover">
                        <span class="absolute top-3 left-3 bg-miao-red text-white text-xs font-medium px-2 py-1 rounded">
                            网红打卡
                        </span>
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-lg mb-1">沱江边吊脚楼民宿</h3>
                        <div class="flex items-center text-sm text-neutral-500 mb-3">
                            <i class="fa fa-map-marker mr-1"></i>
                            <span>凤凰古城内，沱江岸边</span>
                        </div>
                        <div class="flex items-center mb-3">
                            <div class="flex text-miao-gold mr-2">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                            </div>
                            <span class="text-sm text-neutral-500">(203条评价)</span>
                        </div>
                        <p class="text-neutral-600 text-sm mb-4 line-clamp-2">
                            百年吊脚楼改造，保留苗族传统建筑风格，推窗可见沱江美景，主人可安排苗家体验活动。
                        </p>
                        <div class="flex items-end justify-between">
                            <div>
                                <span class="text-lg font-bold text-neutral-700">¥368</span>
                                <span class="text-sm text-neutral-500">/晚</span>
                            </div>
                            <button class="bg-wood/10 text-wood px-3 py-1.5 rounded-lg text-sm font-medium hover:bg-wood/20 transition-colors">
                                查看详情
                            </button>
                        </div>
                        </div>
                </div>

                <!-- 民宿卡片2 - 山间小院特色 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover ethnic-shadow border border-wood/10">
                    <div class="relative">
                        <img src="https://picsum.photos/id/177/600/400" alt="张家界山间小院外观，土家族风格" class="w-full h-48 object-cover">
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-lg mb-1">张家界山间小院</h3>
                        <div class="flex items-center text-sm text-neutral-500 mb-3">
                            <i class="fa fa-map-marker mr-1"></i>
                            <span>张家界武陵源区，近天子山</span>
                        </div>
                        <div class="flex items-center mb-3">
                            <div class="flex text-miao-gold mr-2">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                            </div>
                            <span class="text-sm text-neutral-500">(145条评价)</span>
                        </div>
                        <p class="text-neutral-600 text-sm mb-4 line-clamp-2">
                            土家族特色木质结构建筑，群山环绕中的宁静小院，主人提供农家菜和土家族织锦体验。
                        </p>
                        <div class="flex items-end justify-between">
                            <div>
                                <span class="text-lg font-bold text-neutral-700">¥298</span>
                                <span class="text-sm text-neutral-500">/晚</span>
                            </div>
                            <button class="bg-wood/10 text-wood px-3 py-1.5 rounded-lg text-sm font-medium hover:bg-wood/20 transition-colors">
                                查看详情
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 民宿卡片3 - 芙蓉镇特色 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover ethnic-shadow border border-wood/10">
                    <div class="relative">
                        <img src="https://picsum.photos/id/239/600/400" alt="芙蓉镇溪边人家外观，靠近瀑布" class="w-full h-48 object-cover">
                        <span class="absolute top-3 left-3 bg-wood text-white text-xs font-medium px-2 py-1 rounded">
                            性价比高
                        </span>
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-lg mb-1">芙蓉镇溪边人家</h3>
                        <div class="flex items-center text-sm text-neutral-500 mb-3">
                            <i class="fa fa-map-marker mr-1"></i>
                            <span>永顺县芙蓉镇，瀑布附近</span>
                        </div>
                        <div class="flex items-center mb-3">
                            <div class="flex text-miao-gold mr-2">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-o"></i>
                            </div>
                            <span class="text-sm text-neutral-500">(87条评价)</span>
                        </div>
                        <p class="text-neutral-600 text-sm mb-4 line-clamp-2">
                            位于芙蓉镇核心景区，土家族传统民居改造，可观赏瀑布夜景，提供米豆腐等特色小吃。
                        </p>
                        <div class="flex items-end justify-between">
                            <div>
                                <span class="text-lg font-bold text-neutral-700">¥258</span>
                                <span class="text-sm text-neutral-500">/晚</span>
                            </div>
                            <button class="bg-wood/10 text-wood px-3 py-1.5 rounded-lg text-sm font-medium hover:bg-wood/20 transition-colors">
                                查看详情
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 查看更多按钮 -->
            <div class="mt-8 text-center">
                <button class="border border-wood text-wood hover:bg-wood hover:text-white transition-colors px-6 py-2 rounded-lg font-medium">
                    查看更多民宿 <i class="fa fa-angle-right ml-1"></i>
                </button>
            </div>
        </section>

        <!-- 特价住宿区域 -->
        <section id="special" class="accommodation-content hidden mb-12">
            <h2 class="text-xl font-bold text-neutral-700 mb-6 flex items-center">
                <i class="fa fa-tag text-wood mr-2"></i> 特价住宿
                <span class="ml-2 text-sm font-normal text-neutral-500">超值价格体验湘西风情</span>
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- 特价住宿1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover ethnic-shadow border border-wood/10">
                    <div class="relative">
                        <img src="https://picsum.photos/id/42/600/400" alt="湘西快捷酒店外观，融合民族元素" class="w-full h-40 object-cover">
                        <span class="absolute top-3 right-3 bg-miao-red text-white text-xs font-medium px-2 py-1 rounded">
                            省¥80
                        </span>
                    </div>
                    <div class="p-4">
                        <h3 class="font-bold text-base mb-1">湘西快捷酒店</h3>
                        <div class="flex items-center text-xs text-neutral-500 mb-2">
                            <i class="fa fa-map-marker mr-1"></i>
                            <span>吉首市火车站附近</span>
                        </div>
                        <div class="flex items-center mb-2">
                            <div class="flex text-miao-gold mr-1 text-xs">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-o"></i>
                                <i class="fa fa-star-o"></i>
                            </div>
                            <span class="text-xs text-neutral-500">(63条评价)</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <div>
                                <span class="text-lg font-bold text-neutral-700">¥158</span>
                                <span class="text-xs text-neutral-500 line-through ml-1">¥238</span>
                            </div>
                            <button class="bg-miao-red text-white px-2.5 py-1 rounded text-xs font-medium hover:bg-miao-red/90 transition-colors">
                                立即抢购
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 特价住宿2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover ethnic-shadow border border-wood/10">
                    <div class="relative">
                        <img src="https://picsum.photos/id/44/600/400" alt="凤凰古城青年旅社外观，苗族风格装饰" class="w-full h-40 object-cover">
                        <span class="absolute top-3 right-3 bg-miao-red text-white text-xs font-medium px-2 py-1 rounded">
                            省¥50
                        </span>
                    </div>
                    <div class="p-4">
                        <h3 class="font-bold text-base mb-1">凤凰古城青年旅社</h3>
                        <div class="flex items-center text-xs text-neutral-500 mb-2">
                            <i class="fa fa-map-marker mr-1"></i>
                            <span>凤凰古城北门附近</span>
                        </div>
                        <div class="flex items-center mb-2">
                            <div class="flex text-miao-gold mr-1 text-xs">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                                <i class="fa fa-star-o"></i>
                            </div>
                            <span class="text-xs text-neutral-500">(92条评价)</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <div>
                                <span class="text-lg font-bold text-neutral-700">¥98</span>
                                <span class="text-xs text-neutral-500 line-through ml-1">¥148</span>
                            </div>
                            <button class="bg-miao-red text-white px-2.5 py-1 rounded text-xs font-medium hover:bg-miao-red/90 transition-colors">
                                立即抢购
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 特价住宿3 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover ethnic-shadow border border-wood/10">
                    <div class="relative">
                        <img src="https://picsum.photos/id/46/600/400" alt="张家界景区客栈外观，土家族风格" class="w-full h-40 object-cover">
                        <span class="absolute top-3 right-3 bg-miao-red text-white text-xs font-medium px-2 py-1 rounded">
                            省¥120
                        </span>
                    </div>
                    <div class="p-4">
                        <h3 class="font-bold text-base mb-1">张家界景区客栈</h3>
                        <div class="flex items-center text-xs text-neutral-500 mb-2">
                            <i class="fa fa-map-marker mr-1"></i>
                            <span>张家界国家森林公园旁</span>
                        </div>
                        <div class="flex items-center mb-2">
                            <div class="flex text-miao-gold mr-1 text-xs">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-o"></i>
                            </div>
                            <span class="text-xs text-neutral-500">(76条评价)</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <div>
                                <span class="text-lg font-bold text-neutral-700">¥268</span>
                                <span class="text-xs text-neutral-500 line-through ml-1">¥388</span>
                            </div>
                            <button class="bg-miao-red text-white px-2.5 py-1 rounded text-xs font-medium hover:bg-miao-red/90 transition-colors">
                                立即抢购
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 特价住宿4 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover ethnic-shadow border border-wood/10">
                    <div class="relative">
                        <img src="https://picsum.photos/id/48/600/400" alt="德夯苗寨民宿外观，传统苗族建筑" class="w-full h-40 object-cover">
                        <span class="absolute top-3 right-3 bg-miao-red text-white text-xs font-medium px-2 py-1 rounded">
                            省¥60
                        </span>
                    </div>
                    <div class="p-4">
                        <h3 class="font-bold text-base mb-1">德夯苗寨民宿</h3>
                        <div class="flex items-center text-xs text-neutral-500 mb-2">
                            <i class="fa fa-map-marker mr-1"></i>
                            <span>吉首市德夯苗寨内</span>
                        </div>
                        <div class="flex items-center mb-2">
                            <div class="flex text-miao-gold mr-1 text-xs">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-o"></i>
                            </div>
                            <span class="text-xs text-neutral-500">(42条评价)</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <div>
                                <span class="text-lg font-bold text-neutral-700">¥188</span>
                                <span class="text-xs text-neutral-500 line-through ml-1">¥248</span>
                            </div>
                            <button class="bg-miao-red text-white px-2.5 py-1 rounded text-xs font-medium hover:bg-miao-red/90 transition-colors">
                                立即抢购
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 查看更多按钮 -->
            <div class="mt-8 text-center">
                <button class="border border-wood text-wood hover:bg-wood hover:text-white transition-colors px-6 py-2 rounded-lg font-medium">
                    查看更多特价 <i class="fa fa-angle-right ml-1"></i>
                </button>
            </div>
        </section>

        <!-- 湘西特色住宿体验 -->
        <section class="mb-12">
            <h2 class="text-xl font-bold text-neutral-700 mb-6 text-center">湘西特色住宿体验</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="bg-white rounded-xl overflow-hidden shadow-sm border border-wood/10">
                    <div class="md:flex">
                        <div class="md:shrink-0">
                            <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://picsum.photos/id/1061/600/400" alt="苗族吊脚楼住宿体验">
                        </div>
                        <div class="p-6">
                            <div class="uppercase tracking-wide text-sm text-miao-red font-semibold">文化体验</div>
                            <h3 class="mt-2 text-lg font-medium text-neutral-700">苗族吊脚楼生活体验</h3>
                            <p class="mt-1 text-neutral-500 text-sm">
                                入住百年历史的苗族吊脚楼，参与苗家日常劳作，学习苗族织锦技艺，夜晚围坐火塘听苗家故事，体验最纯正的苗族生活。
                            </p>
                            <div class="mt-4">
                                <a href="#" class="text-wood hover:text-wood/80 text-sm font-medium flex items-center">
                                    了解更多 <i class="fa fa-long-arrow-right ml-1"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl overflow-hidden shadow-sm border border-wood/10">
                    <div class="md:flex">
                        <div class="md:shrink-0">
                            <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://picsum.photos/id/1063/600/400" alt="土家族特色美食体验">
                        </div>
                        <div class="p-6">
                            <div class="uppercase tracking-wide text-sm text-miao-red font-semibold">美食体验</div>
                            <h3 class="mt-2 text-lg font-medium text-neutral-700">土家族美食制作课程</h3>
                            <p class="mt-1 text-neutral-500 text-sm">
                                在土家族民宿中，跟随主人学习制作腊肉、糍粑、合渣等传统美食，了解土家族饮食文化，享用自己亲手制作的特色晚餐。
                            </p>
                            <div class="mt-4">
                                <a href="#" class="text-wood hover:text-wood/80 text-sm font-medium flex items-center">
                                    了解更多 <i class="fa fa-long-arrow-right ml-1"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 推荐理由区域 -->
        <section class="mb-12 bg-white rounded-xl p-6 shadow-sm border border-wood/10">
            <h2 class="text-xl font-bold text-neutral-700 mb-6 text-center">为什么选择我们的住宿</h2>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="flex flex-col items-center text-center p-4 rounded-lg hover:bg-neutral-50 transition-colors">
                    <div class="w-14 h-14 rounded-full bg-wood/10 flex items-center justify-center mb-4">
                        <i class="fa fa-certificate text-wood text-2xl"></i>
                    </div>
                    <h3 class="font-bold text-neutral-700 mb-2">民族特色体验</h3>
                    <p class="text-neutral-500 text-sm">精选具有湘西民族特色的住宿，提供苗家、土家族文化体验活动</p>
                </div>

                <div class="flex flex-col items-center text-center p-4 rounded-lg hover:bg-neutral-50 transition-colors">
                    <div class="w-14 h-14 rounded-full bg-wood/10 flex items-center justify-center mb-4">
                        <i class="fa fa-map-pin text-wood text-2xl"></i>
                    </div>
                    <h3 class="font-bold text-neutral-700 mb-2">黄金位置</h3>
                    <p class="text-neutral-500 text-sm">靠近核心景区，方便游览，同时享受宁静环境，体验当地生活</p>
                </div>

                <div class="flex flex-col items-center text-center p-4 rounded-lg hover:bg-neutral-50 transition-colors">
                    <div class="w-14 h-14 rounded-full bg-wood/10 flex items-center justify-center mb-4">
                        <i class="fa fa-users text-wood text-2xl"></i>
                    </div>
                    <h3 class="font-bold text-neutral-700 mb-2">当地人服务</h3>
                    <p class="text-neutral-500 text-sm">由湘西本地人家经营，提供最地道的旅行建议和个性化服务</p>
                </div>
            </div>
        </section>
    </div>
</body>
{% endblock %}

{% block extra_js %}
<script>
    // 住宿类型选项卡切换
    const accommodationTabs = document.querySelectorAll('.accommodation-tab');
    const accommodationContents = document.querySelectorAll('.accommodation-content');

    accommodationTabs.forEach(tab => {
        tab.addEventListener('click', () => {
            // 移除所有选项卡的活跃状态
            accommodationTabs.forEach(t => {
                t.classList.remove('text-wood', 'border-wood');
                t.classList.add('text-neutral-500', 'border-transparent', 'hover:border-wood/30');
            });

            // 添加当前选项卡的活跃状态
            tab.classList.remove('text-neutral-500', 'border-transparent', 'hover:border-wood/30');
            tab.classList.add('text-wood', 'border-wood');

            // 隐藏所有内容
            accommodationContents.forEach(content => {
                content.classList.add('hidden');
            });

            // 显示当前内容
            const target = tab.getAttribute('data-target');
            document.getElementById(target).classList.remove('hidden');
        });
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });

    // 动态加载目的地数据（示例）
    function loadDestinations() {
        // 模拟异步加载
        setTimeout(() => {
            const datalist = document.getElementById('destinations');
            const additionalDestinations = [
                "矮寨大桥",
                "红石林",
                "坐龙峡",
                "十八洞村"
            ];

            additionalDestinations.forEach(dest => {
                const option = document.createElement('option');
                option.value = dest;
                datalist.appendChild(option);
            });
        }, 1000);
    }

    // 人数选择器功能
    function setupPeopleCounter() {
        // 获取DOM元素
        const adultCount = document.getElementById('adult-count');
        const childCount = document.getElementById('child-count');
        const roomCount = document.getElementById('room-count');

        // 成人加减按钮
        document.getElementById('adult-plus').addEventListener('click', () => {
            let count = parseInt(adultCount.textContent);
            adultCount.textContent = count + 1;
        });

        document.getElementById('adult-minus').addEventListener('click', () => {
            let count = parseInt(adultCount.textContent);
            if (count > 0) {
                adultCount.textContent = count - 1;
            }
        });

        // 儿童加减按钮
        document.getElementById('child-plus').addEventListener('click', () => {
            let count = parseInt(childCount.textContent);
            childCount.textContent = count + 1;
        });

        document.getElementById('child-minus').addEventListener('click', () => {
            let count = parseInt(childCount.textContent);
            if (count > 0) {
                childCount.textContent = count - 1;
            }
        });

        // 房间加减按钮
        document.getElementById('room-plus').addEventListener('click', () => {
            let count = parseInt(roomCount.textContent);
            roomCount.textContent = count + 1;
        });

        document.getElementById('room-minus').addEventListener('click', () => {
            let count = parseInt(roomCount.textContent);
            if (count > 1) { // 至少保留1间房
                roomCount.textContent = count - 1;
            }
        });
    }

    // 页面加载完成后初始化
    window.addEventListener('DOMContentLoaded', () => {
        loadDestinations();
        setupPeopleCounter();
    });
</script>
{% endblock %}